<template>
	<scroll-view class="container" scroll-y="true">
		<view class="nav">
			<view class="flex">
				<view class="navTitle">
					<view :class="{'active':isActive==1}" @click="checked(1)">
						昨日
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==2}" @click="checked(2)">
						今日
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==3}" @click="checked(3)">
						本周
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==4}" @click="checked(4)">
						本月
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item">
			<view class="tit" @click="popup">
				<text>所属机柜</text>
				<view>
					<text>{{name}}</text>
				</view>
			</view>
			<view class="total">
				共<text>{{total}}</text>次使用记录
			</view>

			<scroll-view class="charge" v-if="dataInfo.length !=0" scroll-y="true" @scrolltolower="loadMore">
				<view class="charge_item" v-for="(item,index) in dataInfo" :key='index'>
					<image src="/static/img/agent/battery.png" mode="widthFix"></image>
					<view>
						<view class="top">
							<text>{{item.name}}</text>
							<text class="money">+{{item.money}}</text>
						</view>
						<view class="bottom">
							<text v-if="item.use_state == 1">{{item.use_time}}</text>
							<text v-if="item.use_state == 0" class="use zheng">正在使用中</text>
							<text v-if="item.use_state == 1" class="use">使用结束</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="empty" v-else>
				暂无使用记录
			</view>
		</view>

		<view class="mask" v-if="operation" @click="excel">
			<view class="operation" @click.stop="!excel">
				<view class="radio" v-for="(item,index) in list" :key="item.id">
					<radio value="r1" :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
					<text @click="radio(index)">{{item.name}}</text>
				</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import {
		accountDetail,
		mentList
	} from '../../api/api.js'

	export default {
		data() {
			return {
				isActive: 1,
				operation: false,
				device_id: 0,
				name: '全部',
				list: [],
				dataInfo: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10
			}
		},
		onLoad() {
			this.getMentList()
			this.getDataInfo()
		},
		methods: {
			checked(type) {
				this.current_page = 1
				this.isActive = type
				this.getDataInfo()
			},
			excel() {
				this.operation = false
			},
			getMentList() {
				mentList().then(res => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].isCheck = false
					}
					this.list = res.data
					this.list.unshift({
						device_id: 0,
						name: '全部',
						isCheck: true
					})
				})
			},
			radio(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isCheck = false
				}
				this.list[index].isCheck = true
				this.device_id = this.list[index].device_id
				this.name = this.list[index].name
				this.getDataInfo()
				this.operation = false
			},
			loadMore(e) {
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.getDataInfo('loadMore')
				}
			},
			getDataInfo(loadMore) {
				accountDetail({
					ctype: this.isActive,
					device_id: this.device_id,
					limit: this.per_page,
					page: this.current_page
				}).then(res => {
					if (loadMore) {
						for (let i = 0; i < res.data.data.length; i++) {
							this.dataInfo.push(res.data.data[i])
						}
					} else {
						this.dataInfo = res.data.data
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
					this.use_count = res.data.use_count
				})
			},
			popup() {
				this.operation = true
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.flex {
		display: flex;
		background-color: #FFFFFF;

		.navTitle {
			height: 80upx;
			line-height: 80upx;
			width: 100%;
			text-align: center;
			font-size: 28upx;
			font-family: "PingFang";
			color: rgb(102, 102, 102);

			.active {
				position: relative;
				color: #4eb3ff;
			}

			.active::after {
				content: "";
				position: absolute;
				width: 60upx;
				height: 4upx;
				background-color: #4eb3ff;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;

			}
		}
	}

	.nav_item {
		// margin-top: 15upx;
		width: 100%;
		height: calc(100% - 100upx);
		
		.tit {
			width: calc(100% - 60upx);
			height: 120upx;
			background-color: #FFFFFF;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 15upx;

			image {
				width: 15upx;
			}

			view {
				width: 70%;
				height: 80upx;
				border-radius: 10upx;
				border: 1upx solid #69aacf;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
		
		.total{
			width: calc(100% - 60upx);
			margin-top: 10upx;
			padding: 0 30upx;
			background-color: #FFFFFF;
			height: 90upx;
			line-height: 90upx;
			display: block;
			border-bottom: 1upx solid #f7f7f7;
			
			text {
				margin: 0 10upx;
			}
		}
		
		
		.charge {
			width: 100%;
			height: calc(100% - 220upx);
			margin: 0 auto;
			background-color: #FFFFFF;

			.charge_item {
				width: calc(100% - 60upx);
				height: 150upx;
				padding: 0 30upx;
				border-bottom: 1upx solid #f7f7f7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 100upx;
				}

				view {
					width: calc(100% - 150upx);
					height: 60%;
					display: flex;
					flex-direction: column;

					.top {
						width: 100%;
						display: flex;
						flex-direction: row;
						// align-items: center;
						justify-content: space-between;

						.money {
							color: #2be4ce;
						}
					}

					.bottom {
						width: 100%;
						display: flex;
						flex-direction: row;
						color: #999999;
						font-size: 24upx;

						.use {
							margin-left: 20upx;
						}

						.zheng {
							color: #e86c6b;
						}
					}
				}
			}
		}
		
		.empty{
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			background-color: #f6f6f6;
		}

	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			min-height: 200upx;
			padding: 10upx 30upx;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;

			.radio {
				height: 60upx;
				margin-top: 30upx;
				font-size: 32upx;
				color: #666;

				radio {
					transform: scale(0.8);
					margin: 0 20upx;
				}
			}
		}
	}
</style>
